import React from 'react';

var scope;
var headers = [
    {
        id : 'all',
        text : '全部',
        isActive : true
    },{
        id : '10',
        text : '待付款',
        isActive : false
    },{
        id : '20',
        text : '待收货',
        isActive : false
    },{
        id : '40',
        text : '已完成',
        isActive : false
    }
];
export default class OrderHeader extends React.Component{

    constructor(props) {
        super(props);
        this.state = {headers : headers};
        scope = this;
    }

    render(){
       return (
           <div className="header">
               <ul>
                   {scope.state.headers.map(function(header){
                       return (
                           <li key={header.id} className={header.isActive ? 'active' : ''} onClick={scope.headerChange.bind(this,header.id)}>
                               {header.text}
                           </li>
                       )
                   })}
               </ul>
           </div>
       );
    };

    headerChange(id){
        scope.state.headers.map(function(header){
            header.isActive = false;
            if(id == header.id){
                header.isActive = true;
                scope.props.changeCallback(header.id);
            }
        });
        scope.setState({headers : scope.state.headers});
    };
};